package com.example.newsapp.ui.screens.otherScreens

import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowLeft
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import com.example.newsapp.R
import com.example.newsapp.data.compositionLocal.LocalDrawerEnabled
import com.example.newsapp.data.compositionLocal.LocalNavController
import com.example.newsapp.data.`object`.StateSave
import kotlin.math.max
import kotlin.math.min

// 全屏查看图片的界面
@Composable
fun ViewImageScreen(title: String?, url: String?, modifier: Modifier = Modifier) {
    var context = LocalContext.current
    var configuration = LocalConfiguration.current
    var screenWidth = configuration.screenWidthDp.dp
    var navController = LocalNavController.current
    var painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(context)
            .data(url)
            .placeholder(R.drawable.placeholder_300x400)
            .build()
    )

    var scale by remember { mutableStateOf(1f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    var lastOffset by remember { mutableStateOf(Offset.Zero) }
    var lastScale by remember { mutableStateOf(1f) }

    StateSave.gesturesEnable = false
    Column {
        Row (
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(Color.Black)
        ) {
            Icon(
                imageVector = Icons.Default.KeyboardArrowLeft,
                contentDescription = null,
                tint = Color.White,
                modifier = Modifier
                    .padding(top = 10.dp)
                    .size(40.dp)
                    .clickable {
                        navController.popBackStack()
                    }
            )
            Text(
                text = title.toString(),
                fontSize = 18.sp,
                color = Color.White,
                modifier = Modifier.padding(top = 16.dp, bottom = 20.dp),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
        LazyColumn (
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Black)
        ) {
            item {
                Image(
                    painter = painter,
                    contentDescription = title,
                    modifier = Modifier
                        .width(screenWidth)
                        .graphicsLayer(
                            scaleX = scale,
                            scaleY = scale,
                            translationX = offset.x,
                            translationY = offset.y
                        )
                        .pointerInput(Unit) {
                            detectTransformGestures { centroid, pan, zoom, rotation ->
                                scale = max(1f, min(scale * zoom, 5f)) // 限制缩放范围在 1 到 5 之间
                                offset = lastOffset + (centroid - centroid * zoom) + pan
                                lastScale = scale
                                lastOffset = offset
                            }
                        },
                    contentScale = ContentScale.FillWidth
                )
            }
        }
    }

}